<template>
	<view class="authentication-info">
		<view class="item-wrap" v-for="(item, i) in materialList" :key="i">
			<!-- 	<view class="form-wrap more-wrap">
				<text class="label">请选择材料种类</text>
				<div class="selected">
					 <picker mode="selector" range-key="name" @change="handleMaterial($event,i)"
					<picker mode="selector" range-key="name" :value="item.material_type" :range="items">
						<text>{{!item.name ? '请选择材料类型' : item.name}}</text>
					</picker>
				</div>
			</view> -->
			<view class="form-wrap">
				<text class="label">材料种类</text>
				<input type="text" class="uni-input" maxlength="30" disabled placeholder="请输入微信公众号名称"
					v-model="item.name" />
			</view>
			<template v-if="item.material_type == 'mp_proof'">
				<view class="form-wrap">
					<text class="label">微信公众号名称</text>
					<input type="text" class="uni-input" maxlength="30" placeholder="请输入微信公众号名称"
						v-model="item.mp_name" />
				</view>
				<view class="form-wrap input-img">
					<text class="label">首页货品截图</text>
					<view class="img-wrap" @click="uplodImg('wx_gzh_index_img', i)">
						<text class="iconfont iconadd1" v-if="!item.mp_compic"></text>
						<image v-else :src="$util.img(item.mp_compic)" mode="aspectFit"></image>
						<view class="tips font-size-activity-tag color-tip padding-bottom">请上传首页货品截图</view>
					</view>
				</view>
				<view class="form-wrap input-img">
					<text class="label">认证页截图</text>
					<view class="img-wrap" @click="uplodImg('wx_gzh_rzyjt', i)">
						<text class="iconfont iconadd1" v-if="!item.mp_authpic"></text>
						<image v-else :src="$util.img(item.mp_authpic)" mode="aspectFit"></image>
						<view class="tips font-size-activity-tag color-tip padding-bottom">请上传认证页截图</view>
					</view>
				</view>
			</template>
			<template v-if="item.material_type == 'mini_proof'">
				<view class="form-wrap">
					<text class="label">小程序名称</text>
					<input type="text" class="uni-input" maxlength="30" placeholder="请输入小程序名称"
						v-model="item.mini_name" />
				</view>
				<view class="form-wrap input-img">
					<text class="label">首页货品截图</text>
					<view class="img-wrap" @click="uplodImg('wx_xcx_index_img', i)">
						<text class="iconfont iconadd1" v-if="!item.mini_compic"></text>
						<image v-else :src="$util.img(item.mini_compic)" mode="aspectFit"></image>
						<view class="tips font-size-activity-tag color-tip padding-bottom">请上传首页货品截图</view>
					</view>
				</view>
				<view class="form-wrap input-img">
					<text class="label">认证页截图</text>
					<view class="img-wrap" @click="uplodImg('wx_xcx_rzyjt', i)">
						<text class="iconfont iconadd1" v-if="!item.mini_authpic"></text>
						<image v-else :src="$util.img(item.mini_authpic)" mode="aspectFit"></image>
						<view class="tips font-size-activity-tag color-tip padding-bottom">请上传认证页截图</view>
					</view>
				</view>
			</template>
			<template v-if="item.material_type == 'app_proof'">
				<view class="form-wrap">
					<text class="label">APP名称</text>
					<input type="text" class="uni-input" maxlength="30" placeholder="请输入APP名称"
						v-model="item.app_name" />
				</view>
				<view class="form-wrap">
					<text class="label">APP下载链接</text>
					<input type="text" class="uni-input" maxlength="30" placeholder="请输入APP下载链接"
						v-model="item.app_url" />
				</view>
				<view class="form-wrap">
					<text class="label">APP账号</text>
					<input type="text" class="uni-input" maxlength="30" placeholder="请输入APP账号"
						v-model="item.app_account" />
				</view>
				<view class="form-wrap">
					<text class="label">APP密码</text>
					<input type="text" class="uni-input" maxlength="30" placeholder="请输入APP密码"
						v-model="item.app_password" />
				</view>
				<view class="form-wrap input-img">
					<text class="label">首页货品截图</text>
					<view class="img-wrap" @click="uplodImg('app_index_img', i)">
						<text class="iconfont iconadd1" v-if="!item.app_compic"></text>
						<image v-else :src="$util.img(item.app_compic)" mode="aspectFit"></image>
						<view class="tips font-size-activity-tag color-tip padding-bottom">请上传首页货品截图</view>
					</view>
				</view>
			</template>
			<template v-if="item.material_type == 'h5_proof'">
				<view class="form-wrap">
					<text class="label">H5商城链接</text>
					<input type="text" class="uni-input" maxlength="30" placeholder="请输入H5商城链接" v-model="item.h5_url" />
				</view>
				<view class="form-wrap">
					<text class="label">H5账号</text>
					<input type="text" class="uni-input" maxlength="30" placeholder="请输入APP账号"
						v-model="item.h5_account" />
				</view>
				<view class="form-wrap">
					<text class="label">H5密码</text>
					<input type="text" class="uni-input" maxlength="30" placeholder="请输入APP密码"
						v-model="item.h5_password" />
				</view>
				<view class="form-wrap input-img">
					<text class="label">首页货品截图</text>
					<view class="img-wrap" @click="uplodImg('h5_index_img', i)">
						<text class="iconfont iconadd1" v-if="!item.h5_compic"></text>
						<image v-else :src="$util.img(item.h5_compic)" mode="aspectFit"></image>
						<view class="tips font-size-activity-tag color-tip padding-bottom">请上传首页货品截图</view>
					</view>
				</view>
			</template>
			<template v-if="item.material_type == 'locallife_proof'">
				<view class="form-wrap input-img">
					<text class="label">店铺门头照</text>
					<view class="img-wrap" @click="uplodImg('xx_head_img', i)">
						<text class="iconfont iconadd1" v-if="!item.door_photo"></text>
						<image v-else :src="$util.img(item.door_photo)" mode="aspectFit"></image>
						<view class="tips font-size-activity-tag color-tip padding-bottom">请上传店铺门头照</view>
					</view>
				</view>
				<view class="form-wrap input-img">
					<text class="label">内部环境照</text>
					<view class="img-wrap" @click="uplodImg('xx_room_img', i)">
						<text class="iconfont iconadd1" v-if="!item.environment_photo"></text>
						<image v-else :src="$util.img(item.environment_photo)" mode="aspectFit"></image>
						<view class="tips font-size-activity-tag color-tip padding-bottom">请上传内部环境照</view>
					</view>
				</view>
				<!-- <view class="form-wrap input-img">
					<text class="label">商户合作协议</text>
					<view class="img-wrap" @click="uplodImg('xx_agrmment',i)">
						<text class="iconfont iconadd1" v-if="!item.co_agreement"></text>
						<image v-else :src="$util.img(item.co_agreement)" mode="aspectFit"></image>
						<view class="tips font-size-activity-tag color-tip padding-bottom">请上传商户合作协议</view>
					</view>
				</view> -->
			</template>
			<!-- <view class="delete_wrap">
				<div></div>
				<div class="delete_btn" @click="deleteMaterial(i)">删除</div> 
			</view> -->
		</view>

		<!-- <view class="tips color-base-text" @click="addMaterial">新增材料</view> -->
		<view class="set-next">
			<button type="default" @click="toPrevious()">上一步</button>
			<button type="primary" @click="toNext()">立即申请</button>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				items: [{
						code: "mp_proof",
						name: "微信公众号",
					},
					{
						code: "mini_proof",
						name: "微信小程序",
					},
					{
						code: "app_proof",
						name: "APP",
					},
					{
						code: "h5_proof",
						name: "H5",
					},
					{
						code: "locallife_proof",
						name: "线下门店",
					},
				],
				materialList: [{
					material_type: "locallife_proof",
					name: "线下门店",
				}, ],
			};
		},
		async created() {
			await this.getApplication();
		},
		methods: {
			// 获取是否进件是否审核通过
			async getApplication() {
				console.log('dsadsadsadsad')
				return new Promise((resolve, reject) => {
					this.$api.sendRequest({
						url: "/shopapi/apply/getShopApplyStatus",
						data: {
							member_id: uni.getStorageSync("member_id"),
						},
						success: (res) => {
							if (res.data) {
								this.materialList = [{
									material_type: "locallife_proof",
									name: "线下门店",
									door_photo: res.data.door_photo,
									environment_photo: res.data.environment_photo,
								}];
							}
						},
					});
					resolve();
				});
			},
			// 删除材料
			deleteMaterial(i) {
				if (this.materialList.length == 1) {
					return this.$util.showToast({
						title: "最少上传一种材料！",
					});
				}
				this.materialList.splice(i, 1);
			},
			// 选择材料类型
			handleMaterial(e, i) {
				this.materialList[i].material_type = this.items[e.detail.value].code;
				this.materialList[i].name = this.items[e.detail.value].name;
			},
			// 新增材料种类
			addMaterial() {
				this.materialList.push({
					material_type: "",
					name: "",
				});
			},
			toNext() {
				let shopInfo = uni.getStorageSync("application_shopInfo");
				let companyInfo = uni.getStorageSync("application_companyInfo");
				let bankInfo = uni.getStorageSync("application_bankInfo");
				let materialInfo = this.materialList[0];
				let subObj = {
					...shopInfo,
					...companyInfo,
					...bankInfo,
					...materialInfo,
					member_id: uni.getStorageSync("member_id"),
				};
				this.$api.sendRequest({
					url: "/shopapi/apply/applyShopSettled",
					data: subObj,
					success: (res) => {
						if (res.code == 0) {
							this.$util.showToast({
								title: "申请成功，请关注申请状态!",
							});
							setTimeout(() => {
								uni.reLaunch({
									url: "/pages/apply/apply_step",
								});
							}, 1000);
						}
					},
				});
				return; 
				if (this.vertify()) {
					uni.setStorageSync("application_materialInfo", this.materialList);
					// this.$util.redirectTo('/pages/apply/material');
				}
			},
			toPrevious() {
				uni.navigateBack({
					delta: 1,
				});
			},
			vertify() {
				let rule = [{
						name: "door_photo",
						checkType: "required",
						errorMsg: "请上传门头照",
					},
					{
						name: "environment_photo",
						checkType: "required",
						errorMsg: "请上传内部环境照",
					},
				];
				let checkRes = validate.check(this.materialList[0], rule);
				if (checkRes) {
					return true;
				} else {
					this.$util.showToast({
						title: validate.error,
					});
					return false;
				}
			},
			uplodImg(type, i) {
				this.$util.upload({
						number: 1,
						path: "image",
					},
					(res) => {
						if (res) {
							this.$util.showToast({
								title: "上传成功",
							});
							if (type == "wx_gzh_index_img") {
								this.$set(this.materialList[i], "mp_compic", res[0]);
								console.log("this.materialList[i]", this.materialList[i]);
							}
							if (type == "wx_gzh_rzyjt") {
								console.log("=====", this.materialList[i]);
								this.$set(this.materialList[i], "mp_authpic", res[0]);
								console.log("this.materialList[i]", this.materialList[i]);
							}
							if (type == "wx_xcx_index_img") {
								this.$set(this.materialList[i], "mini_compic", res[0]);
							}
							if (type == "wx_xcx_rzyjt") {
								this.$set(this.materialList[i], "mini_authpic", res[0]);
							}
							if (type == "app_index_img") {
								this.$set(this.materialList[i], "app_compic", res[0]);
							}
							if (type == "h5_index_img") {
								this.$set(this.materialList[i], "h5_compic", res[0]);
							}
							if (type == "xx_head_img") {
								this.$set(this.materialList[i], "door_photo", res[0]);
							}
							if (type == "xx_room_img") {
								this.$set(this.materialList[i], "environment_photo", res[0]);
								console.log("=====", this.materialList[i]);
							}
							if (type == "xx_agrmment") {
								this.$set(this.materialList[i], "co_agreement", res[0]);
							}
						}
					}
				);
			},
		},
	};
</script>

<style lang="scss">
	.authentication-info {
		overflow: hidden;
	}

	.delete_wrap {
		height: 80rpx;
		line-height: 80rpx;
		display: flex;

		.delete_btn {
			margin-left: auto;
			margin-right: 5vw;
			color: #f56c6c;
		}
	}

	.tips {
		width: 95vw;
		text-align: right;
		height: 40rpx;
		line-height: 40rpx;
		margin: 20rpx 0;
	}

	.item-wrap {
		margin-top: 20rpx;
		background-color: #fff;

		&.type {
			padding: 20rpx 30rpx;
		}

		.form-wrap {
			display: flex;
			align-items: center;
			margin: 0 $margin-both;
			border-bottom: 1px solid $color-line;
			height: 100rpx;
			line-height: 100rpx;

			&:last-child {
				border-bottom: none;
			}

			.label {
				margin-right: $margin-both;
				vertical-align: middle;
			}

			input {
				vertical-align: middle;
				display: inline-block;
				flex: 1;
				text-align: right;
			}

			&.more-wrap {
				.selected {
					vertical-align: middle;
					display: inline-block;
					flex: 1;
					text-align: right;
					color: $color-tip;
					overflow: hidden;
					white-space: pre;
					text-overflow: ellipsis;

					&.have {
						color: $color-title;
					}
				}

				.iconfont {
					color: $color-tip;
					margin-left: 20rpx;
				}
			}

			.value {
				font-weight: bold;
				vertical-align: middle;
				display: inline-block;
				flex: 1;
				text-align: right;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: pre;
			}

			&.input-img {
				height: 240rpx;
				line-height: 200rpx;
				display: block;

				.img-wrap {
					position: relative;
					float: right;
					display: inline-block;
					margin-top: 30rpx;
					width: 300rpx;
					height: 140rpx;
					line-height: 140rpx;
					text-align: center;
					border: 2rpx dashed $color-disabled;

					.iconfont {
						font-size: 68rpx;
						color: $color-disabled;
					}

					image {
						width: 100%;
						height: 100%;
					}

					.tips {
						position: absolute;
						bottom: -70rpx;
					}
				}
			}
		}

		.type-wrap {
			display: flex;
			// align-items: center;
			// justify-content: space-between;
			margin: 20rpx 30rpx;

			view {
				flex: 1;
				position: relative;
				margin-right: 40rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: $color-tip;
				border: 2rpx solid $color-disabled;

				&:last-child {
					margin-right: 0;
				}

				.iconfont {
					position: absolute;
					right: -22rpx;
					bottom: -22rpx;
					font-size: 80rpx;
					display: none;
				}

				&.selected {
					.iconfont {
						display: block;
					}
				}
			}
		}
	}

	.form-title {
		margin-bottom: $margin-updown;
	}

	.set-next {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 80rpx;
		margin-bottom: 80rpx;

		button {
			flex: 1;
		}
	}

	.flex_1 {
		flex: 1;
		text-align: right;
		padding-top: 40rpx;

		input {
			height: 100rpx;
			display: block;
		}
	}

	.time-change {
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: flex-end;
	}

	.picker {
		vertical-align: middle;
		display: inline-block;
		flex: 1;
		text-align: right;

		.iconfont {
			vertical-align: middle;
		}
	}
</style>